<template>
  <lay-container
    fluid="true"
    style="padding: 10px"
    class="flex items-start justify-center h-[100%]">
    <div class="flex flex-wrap w-[1000px] pt-[64px]">
      <div
        v-for="item in menus"
        class="flex-[0_0_25%]"
        :key="item.id">
        <lay-tooltip
          trigger="hover"
          v-if="item.children && item.children.length > 0"
          position="bottom">
          <div class="flex flex-col items-center justify-center mt-[48px]">
            <img
              src="@/assets/messageSlot/avatar1.png"
              class="w-[100px] h-[100px]"
              alt="" />
            <div class="mt-[24px]">{{ item.meta.title }}</div>
          </div>

          <template #content>
            <div class="w-[200px] min-h-[100px] box-border">
              <div
                v-for="(child, index) in item.children"
                :key="index"
                @click="handleToNext(child)"
                class="w-[100%] box-border cursor-pointer p-[8px_12px] hover:text-[#fff] hover:bg-[#78a300]">
                {{ child.meta.title }}
              </div>
            </div>
          </template>
        </lay-tooltip>

        <div
          v-else
          class="flex flex-col items-center justify-center mt-[48px] relative">
          <lay-tooltip
            trigger="hover"
            position="right">
            <div class="relative w-[100px]">
              <lay-badge
                type="rim"
                class="!absolute !top-0 !right-0"
                :value="2">
              </lay-badge>
            </div>

            <img
              src="@/assets/messageSlot/avatar1.png"
              class="w-[100px] h-[100px]"
              alt="" />

            <template #content>
              <div class="w-[200px] box-border">
                <div
                  @click="handleToNext(child)"
                  class="w-[100%] box-border cursor-pointer p-[8px_12px] hover:text-[#fff] hover:bg-[#78a300]">
                  考勤异常
                </div>
                <div
                  @click="handleToNext(child)"
                  class="w-[100%] box-border cursor-pointer p-[8px_12px] hover:text-[#fff] hover:bg-[#78a300]">
                  考勤异常
                </div>
              </div>
            </template>
          </lay-tooltip>

          <div class="mt-[24px]">{{ item.meta.title }}</div>
        </div>
      </div>
    </div>
  </lay-container>
</template>
<script setup>
import { useI18n } from '@layui/layui-vue';
// import {useUserStore} from '@/store/user'
import routers from '@/router/module/base-routes';
import router from '@/router';
// const userStore = useUserStore()

const menus = routers
  .filter((item) => item.show)
  .map((item) => {
    const itemChildren = item.children.filter((el) => !el.hide);
    return {
      ...item,
      children: itemChildren,
    };
  })
  .sort((a, b) => a.sort - b.sort);

const handleToNext = (child) => {
  router.push({
    path: child.path,
  });
};
</script>

<style lang="less" scoped>
.project-grids {
  :deep(.layui-card-body) {
    padding: 0;
  }
}

.project-grid:hover {
  box-shadow: 1px 1px 17px #ccc;
}
.project-grid {
  padding: 24px;
  background-color: #f8f8f8;
  border-radius: 4px;
  margin: 10px;
  color: #777;

  .project-grid-title {
    padding-bottom: 10px;

    i {
      margin-right: 10px;
      font-size: 24px;
      color: #009688;
    }

    a {
      line-height: 24px;
      font-size: 16px;
      vertical-align: top;
    }
    .layui-icon {
      font-weight: 600;
    }
  }

  .project-grid-center {
    height: 44px;
    line-height: 22px;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .project-grid-footer {
    position: relative;

    a {
      color: #777;
      font-size: 12px;
      text-overflow: ellipsis;
      word-break: break-all;
    }

    span {
      color: #ccc;
      font-size: 12px;
      position: absolute;
      right: 0;
    }
  }
}

.dynamic {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  display: -webkit-flex;
  display: flex;

  .layui-status-img img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #009688;
    margin-right: 15px;
  }

  a {
    color: #0481ff;
  }

  span {
    color: #bbb;
  }
}

.links {
  padding: 10px;
}

.links a {
  width: 25%;
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 8px;
  display: inline-block;
  color: #666;
}
.links a:hover {
  color: #11be73;
}

.news {
  display: block;
  line-height: 60px;
  text-align: center;
  background-color: #009688 !important;
  color: #fff !important;
  margin-bottom: 10px;
}

#main {
  height: 300px;
  width: 100%;
}
</style>
